<mat-card class="card">
  <mat-card-header>
    <h3 mat-card-title>{{ 'Configuration Preview' | translate }}</h3>
  </mat-card-header>
  <mat-card-content>
    <div>
      <div class="details-item">
        <div class="label">{{ 'Name' | translate }}:</div>
        <div class="value">{{ (name$ | async) || unknownProp }}</div>
      </div>
      @for (category of topology$ | async | keyvalue; track category.key) {
        <div class="details-item">
          <div class="label">
            {{ category.key | mapValue: vdevTypeLabels | translate }}:
          </div>
          <div class="value">
            {{ category.value | ixTopologyCategoryDescription: !isLimitedToOneLayout(category.key | cast) : category.key === vDevType.Spare }}
          </div>
        </div>
      }
      <div class="details-item">
        <div class="label">{{ 'Encryption' | translate }}:</div>
        <div class="value">{{ (encryption$ | async) || unknownProp }}</div>
      </div>
      <div class="details-item">
        <div class="label">{{ 'Total Raw Capacity' | translate }}:</div>
        <div class="value">{{ totalCapacity$ | async | ixFileSize }}</div>
      </div>
    </div>
  </mat-card-content>
</mat-card>
